<%-- 
    Document   : personalallocations
    Created on : 21 Sep 2013, 8:54:38 PM
    Author     : Salman Noor : School of Electrical and Information Engineering
--%>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/common/hometaglibs.jsp" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <body>
        <div id="mainContainer">
            <h1 class="exampleTitle"><strong>Work Allocation</strong> System</h1>            
            <div id="mainSubContainer">
                <div id="leftNav">
                    <%@include file="/WEB-INF/includes/sideNavBar.jsp" %>
                </div>
                <div id="actualSuperContentContainer">
                    <h1 class="exampleTitle subTitle">Current <strong>Personal Workload</strong></h1>   
                    <input name='baseURL' type='hidden' value='<c:url value="/allocations/Personal/"/>'/>

                    <div id="example" class="k-content">
                        <div id="tabstrip">
                            <ul>
                                <li class="k-state-active">
                                    Research
                                </li>
                                <li>
                                    Course Allocations
                                </li>
                            </ul>
                            <div class="personalAll">
                                <div id="researchGrid"></div>
                                <div class="timeContainer"></div>
                            </div>
                            <div class="personalAll">
                                <div id="courseGrid"></div>
                                <div class="timeContainer"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function() {
            var baseURL = $("input[name='baseURL']").val();

            $.ajax({
            type: "GET",
            async: true,
            url: baseURL + "time",
            success: function(data) {

            $("#teachingTimeContainer").empty();


            $(".timeContainer").append("<div class='employee-details'></div>");
            $(".timeContainer").find(".employee-details").append("<ul></ul>");
            var $teachingContainer = $(".timeContainer").find("ul");
            $.each(JSON.parse(data),function(key,value){
            $teachingContainer.append("<li><label>"+capitaliseFirstLetter(key.replace(/([a-z])([A-Z])/g, '$1 $2'))+"</label>"+value+"</li>");
            });


            }
            });

            function capitaliseFirstLetter(string)
            {
            return string.charAt(0).toUpperCase() + string.slice(1);
            }
            $("#tabstrip").kendoTabStrip({
            animation: {
            open: {
            effects: "fadeIn"
            }
            }
            });
            $("#researchGrid").kendoGrid({
            dataSource: {
            transport: {
            read: {
            url: baseURL + "research",
            dataType: "json"
            }
            },
            pageSize: 20
            },
            //                                height: 430,
            sortable: true,
            pageable: true,
            columns: [
            {
            field: "research_topic",
            title: "Research Topic",
            attributes: {
            "class": "table-cell"
            },
            width: 100
            },
            {
            field: "research_hours",
            title: "Hours",
            width: 40,
            type: "number",
            attributes: {
            "class": "table-cell"
            }
            },
            {
            template: "#=research_start_date+'-'+research_end_date#",
            title: "Research Duration",
            attributes: {
            "class": "table-cell"
            },
            width: 120
            },
            {
            field: "research_sabbatical",
            title: "Taking Sabbatical",
            width: 75,
            type: "boolean",
            attributes: {
            "class": "table-cell"
            }
            },
            {
            template: "#=sabbatical_start_date+'-'+sabbatical_end_date#",
            title: "Sabbatical Duration",
            attributes: {
            "class": "table-cell"
            },
            width: 120
            },
            {
            field: "status",
            title: "Status",
            attributes: {
            "class": "table-cell"
            },
            width: 60
            }
            ],
            dataBound: function(e) {
            //    console.log("dataBound");
            //    var resgrid = $("#researchGrid").data("kendoGrid");
            //    $.each(resgrid,function(ind,item){});
            }
            });



            $("#courseGrid").kendoGrid({
            dataSource: {
            transport: {
            read: {
            url: baseURL + "courses",
            dataType: "json"
            }
            },
            pageSize: 20
            },
            //                                height: 430,
            sortable: true,
            pageable: true,
            columns: [
            {
            field: "course.course_full_name",
            title: "Course",
            attributes: {
            "class": "table-cell"
            },
            width: 130
            },
            {
            field: "start_date",
            title: "Start Date",
            attributes: {
            "class": "table-cell"
            },
            width: 60
            },
            {
            field: "course.course_hours",
            title: "Hours",
            width: 30,
            type: "number",
            attributes: {
            "class": "table-cell"
            }
            },
            {
            field: "course.course_slot",
            title: "Slot",
            width: 30,
            attributes: {
            "class": "table-cell"
            }
            },
            {
            field: "course.weekday",
            title: "Day",
            width: 50,
            attributes: {
            "class": "table-cell"
            }
            },
            {
            template: "#=course.start_time+'-'+course.end_time#",
            title: "Time",
            attributes: {
            "class": "table-cell"
            },
            width: 120
            },
            {
            field: "course.semester",
            title: "Semester",
            width: 50,
            attributes: {
            "class": "table-cell"
            }
            },
            {
            field: "status",
            title: "Status",
            attributes: {
            "class": "table-cell"
            },
            width: 60
            }
            ],
            dataBound: function(e) {
            //    console.log("dataBound");
            //    var resgrid = $("#researchGrid").data("kendoGrid");
            //    $.each(resgrid,function(ind,item){});
            }
            });

            });

        </script>
        <style>
            .personalAll{
                /*width:750px;*/
                /*float:right;*/
                /*padding :1%;*/
            }
            .tableContainer{
                font-size: 75% !important;
            }
            .table-cell{
                font-size: 11px;
                text-align: left;
                color: #2E2E2E;
            }
            .k-header {
                font-size: 11px;
            }
            .k-button{
                font-size: 11px; 
            }

            .k-detail-cell .k-tabstrip .k-content {
                padding: 0.2em;
            }
            .employee-details ul
            {
                list-style:none;
                font-style:italic;
                margin: 15px;
                padding: 0;
            }
            .employee-details ul li
            {
                margin: 0;
                line-height: 1.7em;
            }

            .employee-details label
            {
                display:inline-block;
                width:150px;
                padding-right: 10px;
                text-align: right;
                font-style:normal;
                font-weight:bold;
            }

        </style>


    </body>
</html>
